<template name="page-head">
	<view @click="" style="">
		<view class="uni-list-cell bgg " style="position: static;">
		<view class="uni-page-head1">
			<view @click="goto_main" class="uni-page-head-title1" style="text-align: left;">易晶搜索 —— 私域连接平台</view>
		</view>
		<view class="uni-page-head-head2"  >
			
			<view class="uni-list-cell" style="position: static;" v-if="login_btn==false" >
				<view class="uni-page-head-avatar1" >
					<!-- <image  class="avatar" style="margin-top: 4px;" src="/static/向下边框三角.png" v-show="show_list==true"  ></image> -->
					<!-- <image  class="avatar" style="margin-top: 4px;" src="/static/左边.png" v-show="show_list==false"  ></image> -->
				</view>
				<view class="uni-page-head-avatar1" >{{name}}</view>
				<view class="avatars">
					<image  class="avatar"  :src="avatar"  ></image>
					<!-- <button class="transition-button" type="primary" @click="open(['slide-top'])">zoom-in</button> -->
					<view style="position: relative;">
						<!-- <uni-transition :mode-class="['fade']" :styles="maskClass" :show="show" @click="onTap" /> -->
						
						<!-- <uni-transition :duration="300" :mode-class="modeClass" :styles="transfromClass" :show="transShow" @click="onTap" @change="change"> -->
							<view class="avatar_list" v-show="show_list">
								
								<view class="item" :show-badge="true" @click="clear">
									<image class="item-img" src="../退出.png">
										
									</image>退出登录</view>
								<!-- <view class="item" :show-badge="true" >退出1</view> -->
							</view>
							
						<!-- </uni-transition> -->
					</view>
					
				</view>
			</view>
			
			<view class="" v-else>
				<button class="uni-page-head-bn" @click="click">登录</button>
			</view>
				
		</view>
	</view>
		<!-- <view class="login_list">
			<ul>
				<li class="ava-li"><button>退出登录 </button> </li>
				<li class="ava-li"><button>12312 </button> </li>
				<li class="ava-li"><button>12312 </button> </li>
			</ul>
		</view> -->
		</view>
	</view>
</template>
<script>
	import uniTransition from '@/components/uni-transition/uni-transition.vue'
	export default {
		components: {
			uniTransition
		},
		name: "page-head",
		props: {
			title: {
				type: String,
				default: ""
			},
			name: {
				type: String,
				default: "data"
			},
			avatar: {
				type: String,
				default :"/static/img/avatar.png"
				// default :"/static/fj.png"
			},
			login_btn: {
				type: Boolean,
				default: false
			}
			
		},
		data() {
			return {
				exhibition_token: '',
				screenWidth: document.body.clientWidth,
				show_list : false,
				show: false,
				transShow: false,
				modeClass: ['fade'],
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center'
				}
			}
		},
		created() {
		},
		mounted (e) {
			var get_args = this.GetRequest()
			if(get_args.token === 'exhibition-token-thecover2023-aigc'){
				this.exhibition_token = 'exhibition-token-thecover2023-aigc'
			}
		    // 监听窗口大小
		  //   window.onresize = () => {
		  //     return (() => {
		  //       this.screenWidth = document.body.clientWidth
				// var right = -(this.screenWidth -20)
				// const loginList = document.getElementsByClassName('login_list')[0]
				// loginList.style.right = right + 'px'
		  //     })()
		  //   }
		  },
		  onLoad(opt) {
		  	console.log(opt)
		  	this.exhibition_token = opt.token
		  	
		  },
		methods: {
			GetRequest() {
			    var url = location.href; //获取url中"?"符后的字串
			    var theRequest = new Object();
			    if (url.indexOf("?") != -1) {
			        var str = url.substr(url.indexOf("?")+1);
			        var strs = str.split("&");
			        for(var i = 0; i < strs.length; i ++) {
			            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
			        }
			    }
			    return theRequest;
			},
			showlist(){
				this.show_list = !this.show_list
			},
			click(){
				this.$emit('poplogin')
			},
			goto_main(){
				if(this.exhibition_token ==='exhibition-token-thecover2023-aigc'){
					uni.navigateTo({
							url:"/?token=exhibition-token-thecover2023-aigc"
						})
					return
				}
				uni.navigateTo({
					url:"/"
				})
			},
			mask() {
				this.show = true
			},
			open(mode) {
				this.modeClass = mode
				this.transShow = !this.transShow
			},
			onTap() {
				this.transShow = this.show = false
			},
			change(e) {
				console.log(e.detail);
			},
			close_my(){
				this.transShow = this.show = false
			},
			clear(){
				uni.setStorageSync('x-auth-token','');
				uni.navigateTo({
						url:"/"
					})
			}
			
		}
	}
	
</script>
<style>
	.item-img{
		position: absolute;
		top: 6px;
		left: 10px;
		width: 16px;
		height: 16px;
		
	}
	.ava-li{
		right: 0;
		
		list-style: none;
		margin-left: 10px;
		margin-top: 4px;
	}
	.login_list{
		position: absolute;
		right: -1900px;
		z-index: 1;
	}
	.bgg{
		/* background: linear-gradient(to top right,#CC5FFF,#4474FF);
		background: -o-linear-gradient(to top right,#CC5FFF,#4474FF);
		background: -moz-linear-gradient(to top right,#CC5FFF,#4474FF); */
	}
	.uni-actionsheet{
		top: 80px,
	}
.avatar {
	margin-left: 10px;
	text-align: left;
	width: 32px;
	height: 32px;
	object-fit: contain;
	border-radius: 32px;
	border: 1px solid #ff
}
.uni-page-head1{
		text-align: left;
		/* background-color: #d2d2d3; */
		margin-top: 15px;
		margin-left: 12px;
}

.uni-page-head-title1 {
    display: inline-block;	
    padding: 0 20px;
    font-size: 20px;
    height: 44px;
    line-height: 44px;
    color: #FFFFFF;
	font-weight: 900;
    box-sizing: border-box;
    /* border-bottom: 1px solid #D8D8D8; */
    text-align: left;
	font-size: 20px;
	font-family: PingFangSC-Semibold;
	font-weight: 600;
	text-align: left;
}
.uni-page-head2{
		text-align: right;
		background-color: #d2d2d3;
}
.uni-page-head-avatar1 {
    display: inline-block;
    margin-left: 10px;
    font-size: 1em;
    height: 44px;
    line-height: 44px;
    color: whitesmoke;
	font-weight: 500;
    box-sizing: border-box;
    /* border-bottom: 1px solid #D8D8D8; */
    
	text-align: left; 
}
.uni-page-head-head2{
	margin-right: 40px;
}
.uni-page-head-bn {
	font-size: 1em;
	padding-bottom: 1px;
	color: #3E6BFF;
	width: 80px;
	text-align: center;
	font-size: 1em;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 500;
	color: #3E6BFF;
	line-height: 2em;
}
.avatars{
	
	magin-left:10px;
}
.avatar_list{
	position: absolute;
	z-index:999;
	top: 10px;
	right: -100px;
	border-radius: 4px;
	background-color: #fafcffbd;
	margin-right: 100px;
}
.item{
	width: 90px;
	text-align: right;
	/* background-color:wheat; */
	/* margin-right: 100px; */
	font-size: 15px;
	font-weight: 500;
	color: #424040;
	padding-right: 15px;
	
}

</style>